<template>
  <a-layout>
    <a-layout-header class="header">
      <div class="logo" @click="home">页面制作工具</div>
      <a-menu theme="dark" mode="horizontal" :selectedKeys="$store.getters.keys" class="nav" @click="switchLayout">
        <a-menu-item key="pagelayout">
          <a-icon type="desktop"/> 页面布局
        </a-menu-item>
        <a-menu-item key="formlayout">
          <a-icon type="form"/> 表单布局
        </a-menu-item>
        <a-menu-item key="listlayout">
          <a-icon type="ordered-list"/> 列表布局
        </a-menu-item>
        <a-menu-item key="approvalflow">
          <a-icon type="branches"></a-icon> 审批流编辑器
        </a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content class="content">
      <router-view/>
    </a-layout-content>
    <a-layout-footer class="footer">
      页面制作工具 © 2019
    </a-layout-footer>
  </a-layout>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
    };
  },
  methods: {
    home() {
      this.$router.push('/index');
    },
    switchLayout({key}) {
      this.$router.push(`/${key}`);
    }
  }
}
</script>

<style scoped>
.header {
  position: fixed;
  z-index: 1;
  width: 100%;
}

.logo {
  color: #e5e5e5;
  font-size: 22px;
  line-height: 64px;
  margin-right: 48px;
  float: left;
  cursor: pointer;
}

.logo:hover {
  color: #fff;
}

.nav {
  line-height: 64px;
}

.content {
  padding: 24px 50px;
  margin-top: 64px;
}

.footer {
  text-align: center;
  padding: 0;
  line-height: 48px;
}
</style>